import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Modal, Radio, Input, Select } from 'antd';
import { formatMessage, FormattedMessage } from 'umi/locale';

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
@Form.create()
class AddRuleForm extends PureComponent {
  render() {
    const {
      modalVisible,
      form,
      handleModalVisible,
      handleAdd,
      ruleTypes,
      productProps,
      rules,
      isShowPid,
    } = this.props;

    const okHandle = () => {
      form.validateFields((error, fieldsValue) => {
        if (error) return;
        handleAdd(fieldsValue, form);
      });
    };

    const renderOption = data =>
      data.map(item => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ));

    const renderPropsOption = data =>
      data.map(item => (
        <Option key={item.id} value={item.label}>
          {item.label}
        </Option>
      ));

    return (
      <Modal
        title={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.add' })}
        destroyOnClose
        visible={modalVisible}
        width={618}
        onCancel={() => handleModalVisible()}
        onOk={okHandle}
      >
        <div style={{ width: 530, paddingLeft: 44 }}>
          <FormItem
            label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.name' })}
            colon={false}
          >
            {form.getFieldDecorator('name', {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'app.dm.product.protocol.tcp.rule.name.place' }),
                },
              ],
            })(
              <Input
                placeholder={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.name.place' })}
              />,
            )}
          </FormItem>
          {isShowPid === true ? (
            <FormItem
              label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.pid' })}
              colon={false}
            >
              {form.getFieldDecorator('pid', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({ id: 'app.dm.product.protocol.tcp.rule.pid.place' }),
                  },
                ],
              })(
                <Select
                  allowClear
                  style={{ width: '100%' }}
                  placeholder={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.pid.place' })}
                >
                  {renderOption(rules)}
                </Select>,
              )}
            </FormItem>
          ) : (
            undefined
          )}

          <FormItem
            label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.type' })}
            colon={false}
          >
            {form.getFieldDecorator('ruleTypeId', {
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'app.dm.product.protocol.tcp.rule.type.place' }),
                },
              ],
            })(
              <Select
                allowClear
                style={{ width: '100%' }}
                placeholder={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.type.place' })}
              >
                {renderOption(ruleTypes)}
              </Select>,
            )}
          </FormItem>
          {form.getFieldValue('ruleTypeId') === 3 ? (
            <FormItem
              label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.includeid' })}
              colon={false}
            >
              {form.getFieldDecorator('includeIds', {
                message: formatMessage({ id: 'app.dm.product.protocol.tcp.rule.includeid.place' }),
              })(
                <Select
                  mode="multiple"
                  allowClear
                  style={{ width: '100%' }}
                  placeholder={formatMessage({
                    id: 'app.dm.product.protocol.tcp.rule.includeid.place',
                  })}
                >
                  {renderOption(rules)}
                </Select>,
              )}
            </FormItem>
          ) : (
            undefined
          )}
          {form.getFieldValue('ruleTypeId') === 3 ? (
            <FormItem
              label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.dataIds' })}
              colon={false}
            >
              {form.getFieldDecorator('dataIds', {
                message: formatMessage({ id: 'app.dm.product.protocol.tcp.rule.dataIds.place' }),
              })(
                <Select
                  mode="multiple"
                  allowClear
                  style={{ width: '100%' }}
                  placeholder={formatMessage({
                    id: 'app.dm.product.protocol.tcp.rule.dataIds.place',
                  })}
                >
                  {renderOption(rules)}
                </Select>,
              )}
            </FormItem>
          ) : (
            undefined
          )}

          {form.getFieldValue('ruleTypeId') === 4 || form.getFieldValue('ruleTypeId') === 6 ? (
            <FormItem
              label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.conditionIds' })}
              colon={false}
            >
              {form.getFieldDecorator('conditionIds', {
                message: formatMessage({
                  id: 'app.dm.product.protocol.tcp.rule.conditionIds.place',
                }),
              })(
                <Select
                  mode="multiple"
                  allowClear
                  style={{ width: '100%' }}
                  placeholder={formatMessage({
                    id: 'app.dm.product.protocol.tcp.rule.conditionIds.place',
                  })}
                >
                  {renderOption(rules)}
                </Select>,
              )}
            </FormItem>
          ) : (
            undefined
          )}
          {form.getFieldValue('ruleTypeId') === 4 || form.getFieldValue('ruleTypeId') === 6 ? (
            <FormItem
              label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.conditioncontent' })}
              colon={false}
            >
              {form.getFieldDecorator('conditionContent', {
                message: formatMessage({
                  id: 'app.dm.product.protocol.tcp.rule.conditioncontent.place',
                }),
              })(
                <Input
                  placeholder={formatMessage({
                    id: 'app.dm.product.protocol.tcp.rule.conditioncontent.place',
                  })}
                />,
              )}
            </FormItem>
          ) : (
            undefined
          )}
          {form.getFieldValue('ruleTypeId') === 5 ? (
            <FormItem
              label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.checkrule' })}
              colon={false}
            >
              {form.getFieldDecorator('checkRuleId', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({
                      id: 'app.dm.product.protocol.tcp.rule.checkrule.place',
                    }),
                  },
                ],
              })(
                <Select
                  allowClear
                  style={{ width: '100%' }}
                  placeholder={formatMessage({
                    id: 'app.dm.product.protocol.tcp.rule.checkrule.place',
                  })}
                >
                  <Option value={1}>
                    <FormattedMessage id="app.dm.product.protocol.tcp.rule.total.check" />
                  </Option>
                  <Option value={2}>
                    <FormattedMessage id="app.dm.product.protocol.tcp.rule.xor.check" />
                  </Option>
                </Select>,
              )}
            </FormItem>
          ) : (
            undefined
          )}

          <FormItem
            label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.isfixedlength' })}
            colon={false}
          >
            {form.getFieldDecorator('isFixedLength', {
              initialValue: 1,
              rules: [
                {
                  required: true,
                },
              ],
            })(
              <Radio.Group>
                <Radio value={1}>是</Radio>
                <Radio value={0}>否</Radio>
              </Radio.Group>,
            )}
          </FormItem>
          {form.getFieldValue('isFixedLength') === 1 ? (
            <FormItem
              label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.fixedlength' })}
              colon={false}
            >
              {form.getFieldDecorator('fixedLength', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({
                      id: 'app.dm.product.protocol.tcp.rule.fixedLength.place',
                    }),
                  },
                ],
              })(
                <Input
                  placeholder={formatMessage({
                    id: 'app.dm.product.protocol.tcp.rule.fixedLength.place',
                  })}
                />,
              )}
            </FormItem>
          ) : (
            undefined
          )}
          <FormItem
            label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.isfixedcontent' })}
            colon={false}
          >
            {form.getFieldDecorator('isFixedContent', {
              initialValue: 1,
              rules: [
                {
                  required: true,
                },
              ],
            })(
              <Radio.Group>
                <Radio value={1}>是</Radio>
                <Radio value={0}>否</Radio>
              </Radio.Group>,
            )}
          </FormItem>
          {form.getFieldValue('isFixedContent') === 1 ? (
            <FormItem
              label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.fixedcontent' })}
              colon={false}
            >
              {form.getFieldDecorator('fixedContent', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({
                      id: 'app.dm.product.protocol.tcp.rule.fixedcontent.place',
                    }),
                  },
                ],
              })(
                <Input
                  placeholder={formatMessage({
                    id: 'app.dm.product.protocol.tcp.rule.fixedcontent.place',
                  })}
                />,
              )}
            </FormItem>
          ) : (
            undefined
          )}
          <FormItem
            label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.property' })}
            colon={false}
          >
            {form.getFieldDecorator('propertyLabel', {
              message: formatMessage({ id: 'app.dm.product.protocol.tcp.rule.property.place' }),
            })(
              <Select
                allowClear
                style={{ width: '100%' }}
                placeholder={formatMessage({
                  id: 'app.dm.product.protocol.tcp.rule.property.place',
                })}
              >
                {renderPropsOption(productProps)}
              </Select>,
            )}
          </FormItem>
          <FormItem
            label={formatMessage({ id: 'app.dm.product.protocol.tcp.rule.desc' })}
            colon={false}
          >
            {form.getFieldDecorator('desc', {
              rules: [],
            })(<TextArea rows={4} />)}
          </FormItem>
        </div>
      </Modal>
    );
  }
}
export default AddRuleForm;
